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ABSTRACT 



This paper describes an authoring tool, Visual Constructor, 
that is being developed to help users without technical knowledge to create 
and organize World Wide Web-based course contents. The following goals of 
Visual Constructor are highlighted: (1) it does not require any knowledge of 

evolving Web technology; (2) the user interface is easy to understand and 
operate; (3) it is a Web-based remote authoring environment, so that authors 
can use a Web browser to accomplish all the tasks at any location; (4) course 
authors do not need to worry about the physical files; and (5) information 
can be updated or modified as course content evolves. The underlying 
methodologies that form the basis of the Visual Constructor authoring 
environment are summarized, including course layout templates, document 
templates, logical view, and physical file management. The hierarchical 
software modules are explained, and the authoring process is illustrated with 
an example. The three major features supporting presentation and navigation 
of a Web-based learning environment created by Visual Constructor (i.e., 
structural layout, service modules, and presentation flow) are described. The 
paper concludes with a discussion of future work. Three figures present the 
hierarchy of software modules, and screens for configuring the course layout 
and authoring the course content. Contains 14 references. (AEF) 
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Abstract: It is generally recognized that the Internet and the World Wide Web can be used as 
a platform to deliver web-based learning services. For instructors, the Internet provides shared 
access to resources and media-rich materials to augment traditional instruction. However, the 
main barrier for publishing the courseware on the web is the difficulty of the authoring 
process. It is not easy for the instructors without technical knowledge to create and organize 
web contents. We have been developing an authoring tool, Visual Constructor, to help people 
jump over this hurdle. It provides templates and form-based interfaces for course page layout 
and web documents. A tree map is used to represent a logical view on the organization of the 
whole course. These approaches greatly simplify the authoring work and allow the course 
authors to modify the contents anywhere through a web browser. 



U.S DEPARTMENT OF EDUCATION 

Office of Educational Research and Improvement 

EDUCATIONAL RESOURCES INFORMATION 
CENTER (ERIC) 

□ This document has been reproduced as 
received from the person or organization 
originating it. 

□ Minor changes have been made to 
improve reproduction quality. 



Points of view or opinions stated in this 
document do not necessarily represent 
official OERI position or policy. 



1. Introduction 

The exponential growth of the World Wide Web (or web) has resulted in a large and growing number of 
people with access to the information on the Internet. Due to its popularity, many different applications and 
services such as news, stocks and shopping have been delivered and published through the web. It is more and 
more popular to put course materials on the web by taking advantage of this trend in corporations and 
educational institutes. Both instructors and students benefit from this evolution. The instructors can distribute 
the electronic materials from their desktops. It is also easier for the students to access the course services at 
home or a computer lab. 

A core problem in providing web-based distance learning service is the production and integration of the 
course materials. Since this process is complicated and very time-consuming, most of the instructors are too 
busy to learn authoring tools to design the courses and post them on the web. They do not have time to arrange 
the links between the documents or design the interfaces for the materials. It is also almost impossible for the 
course authors to manage the real files on the web server machine, especially while they do not have enough 
knowledge for computers and web technology. Obviously, there is a need for easy-to-use authoring tools to 
motivate the instructors to quickly produce web-based courseware. 

We have been developing a web-based authoring environment, Visual Constructor, to overcome the 
problems in creating the course contents. The main purpose is to make the process of production as simple as 
possible. The followings are the goals we want to achieve: (1) This environment does not require of authors any 
knowledge of the evolving web technology including HTML(HyperText Markup Language), CGI(Common 
Gateway Interface) and web server. (2) The user interface is easy to understand and operate. Point-and-click, 
and filling in the necessary information are the main operations. (3) It is a web-based remote authoring 
environment so that the course authors can use a web browser to accomplish all the tasks at any location. (4) 
The course authors do not need to worry about the physical files. The system automatically manage the source 
files on the web server. The webmaster can also easily identify and manage the files if necessary. (5) The 
information can be updated or modified for the evolving course content. 

The organization of the paper is as follows. Section 2 describes the related work. Section 3 introduces the 
methodologies and underlying approaches in Visual Constructor. The authoring process through the easy-to-use 
web-based interfaces is also illustrated using an example. In section 4, we explain how the course is presented 
<3“ and navigated in the learning environment created by Visual Constructor. Section 5 concludes the paper and 

^ discusses the future work. 



2. Related Work 



It is generally recognized that the web can be used as a medium to deliver educational services. Many 
institutes and research groups have been using the web to construct distance learning environments on the 
Intemet[Lee et al. 1996][Ibrahim and Franklin 1995]. Different mechanisms can be applied to improve the 
viewing experience. For example, some works have used hierarchical structures to navigate web documents for 
general or educational purpose. Hauck puts arrows with different directions in web pages to indicate the next 
locations the user can traverse to [Hauck 1996]. Lai and colleagues [Lai et al. 1995] design a tree-like overview 
map for students studying the course materials. 

Several projects are related to authoring for different purposes. An independent tool [Carver and Ray 1996] 
running on a local machine has been developed to organize different types of media under a hierarchy to form a 
digital library. A couple of HTML templates are used to generate the course interfaces. The tool Web-CT 
[Goldberg et al. 1996] has been built by the University of British Columbia, Canada. It provides a hierarchical 
view for the organization of the physical files in a course. ANDES system was designed for management and 
delivery of distance education courses by considering the network bandwidth [Johnson et al. 1996]. Girgensohn 
[Girgensohn and Lee 1997] integrated java-based dynamic form into the web to accomplish some sophisticated 
requirements for form layouts. Quint created a structured document editor in which the user can have different 
views on a HTML document based on a formal expression of the document [Quint et al. 1995]. Some related 
commercial tools are also available, such as TopClass by WBT Systems (http://www.websystems.com/ 
whitepaper/) and Asymetrix's Learning Management System (http://www.asymetrix.com/products/). TopClass 
provides the remote authoring capability. However, the customization of the page layout is limited. Asymetrix 
focuses on varieties of tools on a user's local machine. Contigo Software (http://www.contigo.com/ 21 features 
.html) developed a java-based software, Itinerary, to deliver real-time PowerPoint presentation over the Internet. 



3 Authoring Environment 

This section describes the authoring environment in Visual Constructor. We first described several 
methodologies in the system design. Then, the organization of the software modules which are implemented 
according to the methodologies is explained. Finally, the authoring process is illustrated using an example. 



3.1 Methodology 

To develop a user friendly authoring system to attack the goals described in the first section, we have come 
out with several underlying methodologies which form the basis of Visual Constructor. Basically, templates and 
a logical view for a course provide the instructor easy operations by isolating the complicated physical process. 
Based on these ideas, the authoring flow can be simple and smooth for the course authors. 

Course Layout Templates: A course should have a unified layout for the students to navigate through the 
courseware. For example, a table of contents of the course can be put on the left-hand side of the layout to 
represent the course structure. The main advantage of showing the structure can improve the traversal 
experience during which the students do not get lost. However, instructors may have different preferences. 
Some of them may think that it looks better to locate the structure in a frame on top of the web page. Hence, 
various templates are provided for different kinds of layouts to satisfy some degree of customization. Each 
template includes a set of HTML files with only the layout skeleton. Whenever a document is created, the 
system adds structural information into the skeleton. The resulting HTML files reflect the new structure. 

Document Templates: Some documents for a course must be available on-line to provide students complete 
information, such as syllabi, assignments, announcements, lecture notes and reference materials. Each type of 
document usually has some typical information, for example, the course title, the instructor's name, and the 
teaching assistant's name in the syllabus. The template for each type of documents is embedded into the system. 
The interface of each template is a form on which the course author just needs to fill in the necessary contents. 
The system will transform the input into a web page according to the HTML skeleton. By taking advantage of 
the concept of the document template, the author's input and operation for creating a document are minimized. 
The modification or update of a document is also simple by changing the old content of the form. 

Logical View: We want to guide the authors to construct the course in a structural way. Instead of 
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considering what kinds of documents need to be provided, they start by building a logical structure for the 
course first. By following the thinking on the overall picture of the course, then the necessary material can come 
out and be organized. Hierarchical structure is usually the most natural way to present the organization of the 
documents, such as table of contents and computer file systems. Rohrer summarizes that the popular approaches 
to visualizing a hierarchy are tree maps, cone trees, and hyperbolic browsers [Rohrer and Swing 1997]. We 
adopted the tree maps since the 2D layouts are easy and simple to create and traverse. 

Physical File Management: It is difficult for the course authors to manage the physical course files, 
especially when the number of files grows more and more. These files have different purposes, such as 
announcement and discussion, or contain various types of media, such as video clips and java programs. Putting 
them together in an organized way may be complicated. Visual Constructor provides automatic and invisible 
physical file management by making use of the concepts of templates and the logical view. The tool leads the 
course authors to operate the courseware always on the logical view and templates. This mechanism isolates the 
authors from the underlying physical changes. Under this control, the mapping and consistency between the 
logical view and the physical files are maintained. Another advantage appears since there is no broken-link 
problem for the documents inside the system. The link consistency is assured by the tool. 



3.2 Software Modules 

The hierarchical software modules of Visual Constructor is illustrated in [Fig. 1]. The two modules under 
Visual Constructor, Administration and Authoring, execute the two major functionalities, course management 
and course authoring, respectively. The Course Archive module provides the catalog of the available courses. 
Only authorized person can log on the class archive site to manage or author the course. The Administration 
module uses the Course Archive to display the course list for the system administrator. It deals with the creation 
and deletion of a course by touching the physical files of the course. For example, after a course is added, a 
physical folder is created and located in the web server. Authoring module utilizes Course Archive, Course 
Layout and Course Update to select a course and achieve authoring process for the course authors. 




Figure 1: The Software Modules 



The Course Layout module provides a form to get user’s preference. It combines the preference and the 
course layout template to generate the necessary HTML files for the skeleton of the web page layout. The 
Document Template Display module also uses forms to simplify the process of data input. Then, this module 
mixes the document template and user's input into a web document in HTML format. The Logical View module 
draws the tree map according to an internal tree specification. It also coordinates the previous two modules to 
make the course layout structure and the documents consistent. The following is one example of the tree 
specification in XML (extensible Markup Language) [Khare and Rifkin 1997] format. The reason why we 
adopt XML is its nature of representing a tree. By using the standard format, this tool may catch the evolution 
of the web for making the documents structured and may add knowledge into the web contents. 

<frame name=disp> </frame> 

<folder name= title=cscil005> 

<mainpage name=mainpage . html title=mainpage> </mainpage> 

<syllabus name=syllabus . html title=syllabus> </syllabus> 

<folder name- title=Lecturel> 

<SLIDE name=Slidel . html title=Slidel> </SLIDE> 

<SLIDE name=Slide2 . html title=Slide2> </SLIDE> 

<GUIDED_LECTURE name=videol . html title=videol> </GUIDED_LECTURE> 

<SLIDE name=Slide3 . html ti tle=Slide3> </SLIDE> 

</folder> 

</folder> 
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3.3 Authoring Flow 



We would like to focus on the operations for course authoring and to demonstrate how easy it is to 
manipulate the course web site. The course authors do not need to pay attention on the consistency between the 
structure and the documents. For example, when a lecture and its slides are created, the resulting table of 
contents still matches the current organization and contents. The services for interaction can also be easily set 
up and configured, without any advanced technical knowledge, such as script languages, java, and web server 
configuration. One example is used to illustrate the authoring flow. 




Figure 2: Configuring the Course Layout 




Suppose that David is teaching a computer science class, e.g. cscil005, for the spring quarter, 1998. After 
the administrator adds cscilOOS into the course archive, the instructor can log on the system and start to build up 
the course web site from scratch. The first thing is that David needs to think about what the course web page 
will look like. He selects an interface according to the course layout template. [Fig. 2] depicts the user interface 
for the first step. The sample of the layout on the left-hand side gives him the idea what the result will be. He 
can enable some of the available service modules, select background images, etc. He can preview the outcome 
for further adjustment before the selection is done. 

Then, David can continue to add contents into cscil005. This process may prolong for the whole academic 
term since the course materials are augmented gradually. The interface for this process is demonstrated in [Fig. 
3]. The left-hand side frame in the middle contains the logical view in a tree map. The instructor can add or 
delete a node. Each node is a folder or a leaf depending on its type and corresponding template. For example, a 
lecture is represented by a folder since the instructor expects to add more information into that. On the other 



hand, a syllabus is a stand-alone document. After Double-clicking on a leaf, David sees the form with some 
blank areas. What he needs to do is to fill the areas, preview the result page, and then the document is created 
and integrated into the web site. Now the class web site is ready for students to browse! 



4 Learning Environment 

In this section, we would like to demonstrate a web-based learning environment which provides multimedia 
presentation and interaction among students, teaching assistants and the instructor. All of the web interfaces are 
created by Visual Constructor. There are three major features. First, this system gives a structural front-end so 
that the students can easily navigate the course contents. Second, several service modules are integrated in this 
environment to provide synchronous or asynchronous activities. Then, the video-on-demand feature is 
supported to enable a presentation flow on the web. 




Figure 4: The Layout of the Course Web Page 



Structural Layout: [Fig. 4] illustrates one example of the web page layout created by Visual Constructor. It 
is possible to have different layout structures in this authoring system. There are four separated areas 
implemented in frames. The top frame shows the logo for this course or the institute. The right middle frame 
(title frame) has the course title and lists some of the service modules. The left-hand side frame (toe frame) 
gives the structure of the course documents, like a table of contents. The right bottom frame (display frame) is 
used to display the information. The course hierarchy is represented in the toe frame like a table of content. The 
students navigate the hierarchical structure on this frame and read the contents on the display frame if 
necessary. For example, the top most layer includes all the lectures. Under each lecture, there are possibly 
slides, video clips or other reference materials. 

Service Modules: Some services are employed in this system to improve the interaction among the students 
and the instructor. These services in this example include discussion forum, on-line chat room, office hours, on- 
line quiz and a virtual laboratory. The discussion forum provides asynchronous communication in which the 
people can post or reply messages. A private discussion forum can be formed for several students with security 
protection. They can use the area to coordinate team work and accomplish a term project. An on-line chat room 
service supports synchronous activity such that students can share messages and a white board in real time. The 
office hour shows the time table of the office hours of the instructor and teaching assistants. A video 
conferencing tool can be linked with each office hour if the equipment or software is available. The on-line quiz 
is another feature through which the students can evaluate their understandings and the instructor can collect 
students’ performance. Finally, virtual laboratory is one of our java-based projects for the education of computer 
networks [Lee et al. 1997]. It demonstrates that Visual Constructor can support different customized service 
modules. 

Presentation Flow: The learning system also couples with a video server to provide video viewing. A video 
server is developed to deliver pre- stored video streams, such as recorded lectures, to learners at different 
locations through the networks. By integrating the video server and the course material on the web, the students 
not only can study off-line, but also enjoy high-quality lecture video and experience the in-class presentation. 
The synchronization between the video and slides is under development based on our previous works [Schnepf 
et al. 1996][Ma et al. 1998]. The slides automatically change to match the pace of the video. Beyond that, a 
slide-driven synchronization can invoke the corresponding video clip while a student selects a specific slide. 



5 Conclusion 



In this system, we provide the learners an integrated environment to navigate the documents, interact with 
other people and view the multimedia presentation. Due to the tremendous need for an easy-to-use tool for 
creating the course web site, the remote authoring tool. Visual Constructor, has been developed. It helps the 
authors to organize the documents from a tree view. A variety of service modules is also supported. The most 
important contribution is that the tool isolates the activities on the physical files from the course authors so that 
it makes authoring much easier and user friendly. We believe it is able to encourage inexperienced instructors 
and teaching assistants building a class web site. We continually take advantage of the web and state-of-art 
technologies to enhance the system. Part of the implementation using CGI is in the process of shifting to java 
programs. There are more templates coming up for different types of course layouts and web documents. We 
are also improving the presentation flow by synchronizing the streaming video and lecture slides. 
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